<template>
	<view class="flex-col justify-start page">
		<view class="flex-col group_3">
			<view class="flex-col group_4">
				<view class="flex-col">
					<text class="self-start font_2 text_5">反馈类型</text>
				</view>
				<view style="margin-top: 30rpx;overflow: auto;">
					<view class="self-start text-wrapper_6" v-for="(item,index) in arry" :key="index"
						:class="{'extra-class': type == index}" @click="tabse(index)">
						<text>{{item.title}}</text>
					</view>
					<!-- <div class="float-element"></div> -->
				</view>
				<view class="flex-col group_6">
					<text class="self-start font_2 text_12" v-if="arry[type]">反馈类型：{{arry[type].title}}</text>
					<view class="mt-16 flex-col text-area section">
						<textarea v-model="testes" class="placeholder" @input="ipt" maxlength="250" style="width:98%;"
							placeholder="请描述下您的问题，我们会尽快为您解决～">
						</textarea>
						<text class="self-end font_4 text_14 mt-145-5">还剩{{num}}字</text>
					</view>
				</view>
				<view class="flex-col items-start group_7">
					<text class="font_2 text_15">上传图片</text>
				</view>
			</view>
		</view>
		<view style="width: 95%;margin: 15rpx auto;  ">

			<up-upload style="border: 2px solid red;" :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
				name="3" multiple :maxCount="4" :previewFullImage="true"></up-upload>
		</view>
		<view class="flex-col justify-start items-center button text-wrapper_7" @click="upte">
			<text class="font_2 text_17">提交</text>
		</view>

	 

	</view>
</template>




<script>
 
	import {
		FeedBackType,
		Upload,
		Create
	} from '@/utils/user.js'





	export default {
		data() {
			return {
				images: [],
				formData: {},
				imglist: [],
				arry: [],
				type: 0,
				num: 250,
				testes: '',
				fileList: [],
			}
		},
		onLoad(e) {
  
			this.untz()
		},
		methods: {


 
 
 
			afterRead(event) {
				console.log(event)
			 
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中',
					});
				});


				for (let i = 0; i < lists.length; i++) {

					const uploadUrl = 'http://123.57.166.202/home/Upload'; // 服务器上传接口
					uni.uploadFile({
						url: uploadUrl,
						filePath:lists[i].url,
						name: 'file', // 服务器接收的参数名
						success: (res) => {
							// 上传成功的处理
							console.log('上传成功', res);
							
							var code = JSON.parse(res.data).code
							if(code == 1){
								var text = JSON.parse(res.data).msg[0]
								
								
								
								uni.showToast({
									title: text,
									icon: 'none',
									duration: 2000
								})
								
								var arr = this.fileList;
								arr.pop();

								
								
								return
							}
							
							var img = JSON.parse(res.data).data.img_source
							console.log(img)
							
							
							let item = this.fileList[fileListLen];
							this.fileList.splice(fileListLen, 1, {
								...item,
								status: 'success',
								message: '',
								url: img,
							});
							fileListLen++;
							
							
						 
						},
						fail: (err) => {
							// 上传失败的处理
							console.error('上传失败', err);
						}
					});
						
				}

				console.log(this.fileList,55555555)

			},
			
	 











			deletePic(e) {
				console.log(e)
 
				this.fileList.splice(e.index, 1)



			},

			// 提交
			upte() {
			 
				if (this.testes == "") {


					uni.showToast({
						title: '请先描述问题',
						icon: 'none',
						duration: 2000
					})
					return
				}

			 
				var LoginData = uni.getStorageSync('LoginData')
				var data = {
					feedback_type_id: this.arry[this.type].id,
					detail: this.testes,
					img_json: JSON.stringify(this.fileList),
					mobile: LoginData.mobile,
					type: 1,

				}
			 

				// feedback_type_id	int	是	评论类型 id
				// detail	sting	是	具体描述信息
				// img_json	json	否	上传凭证图片json串
				// mobile	sting	否	手机号
				// star	int	否	星级
				// type	int	是	搬家类型

				Create(data).then(res => {
					console.log(res)
				}).catch(error => {
					console.log(error)
				})

			},

 
 
			untz() {
				FeedBackType().then(res => {
					console.log(res)
					this.arry = res.data.data
				}).catch(error => {
					console.log('FeedBackType方法出错', error)
				})

			},
			tabse(e) {
				this.type = e

			},
			ipt(e) {

				console.log(e.detail.cursor)
			
				var num = 250 - e.detail.cursor

				this.num = num
				console.log(num)
			},

		}
	}
</script>

<style>
	.flex-item {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 如果需要设置固定大小，可以添加以下样式 */
		width: 25%;
		border: 2rpx solid yellowgreen;
		/* 平分四分之一 */
	}


	/* 在这里添加样式 */
	.placeholder {
		font-size: 28rpx;

	}


	.mt-19 {
		margin-top: 38rpx;
	}


	.mt-11-5 {
		margin-top: 23rpx;
	}

	.page {
		padding-bottom: 145rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_3 {
		padding-top: 61.44rpx;
		overflow-y: auto;
	}

	.group_4 {
		padding: 12rpx 24rpx;
	}

	.font_2 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 33.62rpx;
		color: #222222;
	}

	.text_5 {
		line-height: 33.48rpx;
	}

	.group_5 {
		padding-bottom: 12rpx;
	}

	.text-wrapper {
		padding: 15.18rpx 0 12.5rpx;
		background-color: #2b8eff14;
		border-radius: 8rpx;
		width: 192rpx;
		height: 52rpx;
		border-left: solid 1rpx #2b8eff;
		border-right: solid 1rpx #2b8eff;
		border-top: solid 1rpx #2b8eff;
		border-bottom: solid 1rpx #2b8eff;
	}



	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.18rpx;
		color: #222222;
	}

	.text_6 {
		color: #2b8eff;
		line-height: 22.32rpx;
	}

	.text-wrapper_10 {
		padding: 15.3rpx 0 14.56rpx;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		width: 144rpx;
		height: 52rpx;
	}

	.text_7 {
		line-height: 22.14rpx;
	}

	.text-wrapper_1 {
		padding: 15.3rpx 0 14.52rpx;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		width: 192rpx;
		height: 52rpx;
	}

	.text-wrapper_4 {
		padding: 15.32rpx 0 14.48rpx;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		width: 120rpx;
		height: 52rpx;
	}

	.text_8 {
		line-height: 22.2rpx;
	}

	.text-wrapper_5 {
		padding: 15.32rpx 0 14.5rpx;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		width: 204rpx;
		height: 52rpx;
	}

	.text-wrapper_3 {
		padding: 15.18rpx 0 14.44rpx;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		width: 192rpx;
		height: 52rpx;
	}

	.text_9 {
		line-height: 22.38rpx;
	}

	.text-wrapper_2 {
		padding: 15.08rpx 0 14.56rpx;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		width: 144rpx;
		height: 52rpx;
	}

	.text_10 {
		line-height: 22.38rpx;
	}

	.text-wrapper_6 {

		background-color: #f6f6f6;
		border-radius: 8rpx;
		margin: 13rpx 8rpx;
		padding: 12rpx 15rpx 12rpx 15rpx;
		float: left;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.18rpx;
		color: #222222;

	}

	.extra-class {

		/* border: 1rpx solid #2b8eff; */
		background-color: #2b8eff14;
		color: #2b8eff;
		/* line-height: 22.32rpx; */
	}





	.text_11 {
		line-height: 22.26rpx;
	}

	.group_6 {
		margin-top: 68.12rpx;
	}

	.text_12 {
		line-height: 33.8rpx;
	}

	.text-area {
		align-self: stretch;
	}

	.section {
		padding: 25rpx 21.54rpx 24.56rpx 25.18rpx;
		background-color: #f4f5f7;
		border-radius: 16rpx;
	}

	.text_13 {
		color: #999999;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27.6rpx;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.18rpx;
		color: #666666;
	}

	.text_14 {
		line-height: 22.26rpx;
	}

	.group_7 {
		margin-top: 68.44rpx;
	}

	.text_15 {
		line-height: 33.54rpx;
	}

	.section_2 {
		padding: 49rpx 0 31.52rpx;
		background-color: #f6f6f6;
		border-radius: 16rpx;
		width: 166rpx;
	}

	.image_5 {
		width: 50rpx;
		height: 40rpx;
	}

	.text_16 {
		line-height: 22.1rpx;
	}

	.button {
		margin: 149rpx 28rpx 0;
	}

	.text-wrapper_7 {
		padding: 28.24rpx 0 28.14rpx;
		/* opacity: 0.4; */
		background-color: #2b8eff;
		border-radius: 8rpx;
	}

	.text_17 {
		color: #ffffff;
	}

	.section_3 {
		background-color: #ffffff;
		height: 68rpx;
	}
</style>